/**
 * @authors AloveZ (ruinand@live.com)
 * @date    2015-08-02 16:20:42
 * @version 1.0.0
 */
UpPathConfig = {
    from: "M0 0L0 100L100 50L100 0Z",
    to: "M0 0L0 10L100 10L100 0Z"
};

DownPathConfig = {
    from: "M0 50L100 0L100 100L0 100Z",
    to: "M0 90L100 90L100 100L0 100Z"
};

islow = 0;

$(document).ready(function() {
    initAll();
    $(window).resize(function() {
        resizeAll();
    });
});

function initAll() {
    resizeAll();
    $("div.posDiv").each(function() {
        var upDom = $(this).children("svg.maskUp").get(0);
        var downDom = $(this).children("svg.maskDown").get(0);
        var upSnap = Snap(upDom);
        var downSnap = Snap(downDom);
        var divpos = $(this);

        resizeSvg(upDom, downDom);
        drawMask(upSnap, downSnap);	
        addHover(upSnap, downSnap, divpos);
    });
}

function resizeAll() {
    w = $(window).width()
    h = $(window).height();
    $(".innerD").css({
        "height": h,
        "width": w / 5
    });
    var tt = $(".posDiv");
    $(".innerI").css("height", h);

}

function resizeSvg(upDom, downDom) {
    if (islow) {
        $(upDom).attr({
            width: w / 5,
            height: h / 2
        });
        $(downDom).css("top", h * 5 / 8);
        $(downDom).attr({
            width: w / 5,
            height: h / 2
        });
        islow = 0;
    } else {
    	$(upDom).attr({
            width: w / 5,
            height: h / 4
        });
        $(downDom).css("top", h / 3);
        $(downDom).attr({
            width: w / 5,
            height: h * 2 / 3
        });
        islow = 1;
    }
}

function drawMask(upSnap, downSnap) {
    upSnap.paper.path(UpPathConfig.from).attr({
        stroke: "#FFF",
        strokeWidth: 0,
        fill: "#000",
        fillOpacity: 0.8
    });
    downSnap.paper.path(DownPathConfig.from).attr({
        stroke: "#FFF",
        strokeWidth: 0,
        fill: "#000",
        fillOpacity: 0.8
    });
}

function addHover(upSnap, downSnap, divpos) {
    var upp = upSnap.select("path");
    var downp = downSnap.select("path");
    divpos.hover(function() {
        upp.animate({
            "path": UpPathConfig.to //折叠
        }, 250);
        downp.animate({
            "path": DownPathConfig.to
        }, 250);
    }, function() {
        upp.animate({
            "path": UpPathConfig.from //未折叠
        }, 250);
        downp.animate({
            "path": DownPathConfig.from
        }, 250)
    });
}